<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>较完整曲线图</title>
	<script src="../static/js/echarts.js"></script>
	<!-- <script src="../static/js/echarts.min.js"></script> -->
</head>
<body>
	<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

/* 
平滑曲线图也是折线图的一种变形，这种更柔和的样式也是一种不错的视觉选择。使用时，只需要将折线图系列的 smooth 属性设置为 true 即可。
*/

// 指定图表的配置项和数据
var option = {
	title: {text: '较完整曲线图'},
	tooltip: {
		trigger: 'axis',		//自动触发详情（不必用鼠标精确指着节点）
		extraCssText: 'color: red;',		//额外附加到浮层的 css 样式
		textStyle: {
			fontSize: 18,		//指定字体
		},
		axisPointer: {
			type: 'cross',		//指示器类型，十字指示器
			label: {
				// show: true,
				// precision: 0,
				//在这里使用formatter，可以控制提示框浮层的【第一行】内容。（此处建议使用字符串模板）
				formatter: '556{value}：',
				// formatter: function (params) {
				// 	// 假设此轴的 type 为 'time'。
				// 	// return 'some text' + echarts.format.formatTime(params.value);
				// 	console.log(params);
				// 	// return 'some test' + params;
				// 	return 'some test' + params;
				// },
			}
		},
		// formatter: '{b0}: {c0}<br />{b0}: {c0}',
		//在这里使用formatter，可以控制提示框浮层的【所有】内容（此处建议使用回调函数）
		formatter: function (params, ticket, callback) {
			// console.log(params);
			var str = params[0].name + "<br />" + "start--" +params[0].value[1] + "--end";
			// console.log(str);
			return str;
		},
		
	},
	toolbox: {
		feature: {
			dataView: {},
			saveAsImage: {
				pixelRatio: 2
			},
			restore: {}
		}
	},
	xAxis: {
		boundaryGap: false,
		data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
		splitLine: {
			// show: true,		//网格中的细线
		},
		
		// axisPointer: {
		// 	label: {
		// 		show: true,
		// 		// precision: 0,
		// 		//在这里使用formatter，可以控制提示框浮层的【第一行】内容。（此处建议使用字符串模板）
		// 		// formatter: '55995{value}：',
		// 		formatter: function (params) {
		// 			// 假设此轴的 type 为 'time'。
		// 			// return 'some text' + echarts.format.formatTime(params.value);
		// 			// console.log(params);
		// 			// return 'some test' + params;
		// 			return 'some test' + params.value;
		// 		},
		// 	}
		// }
	},
	yAxis: {
		// name: "y坐标",
		axisPointer: {
			label: {
				show: true,
				// precision: 0,
				//在这里使用formatter，可以显示坐标轴指示器的文本标签（如果 tooltip.axisPointer.type 设置为 'cross' 则默认显示标签）
				formatter: '找找看我在哪儿：{value}',
				// formatter: function (params) {
				//     // 假设此轴的 type 为 'time'。
				//     // return 'some text' + echarts.format.formatTime(params.value);
				// 	console.log(params);
				// 	// return 'some test' + params;
				// 	return 'some test' + params;
				// },
			},
		},
	},
	series: [{
		type: 'line',
		// name: '文字',
		label: {
			show: true,
			// formatter: '{b}:{c}',
			formatter: function(params){
				// console.log(params);
				return params['name'] + '： ' + params.data[1] + '人';
			},
		},
		smooth: true,		//使用平滑曲线
		data: [[0, 5], [1, 5], [2, 20], [3, 36], [4, 10], [5, 10], [6, 20],]
	}]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>
